<template>
    <div class="noticeList">
        <div class="my-header"></div>
        <div class="listmain">
            <PullRefreshList
                v-model:refreshing="refreshing"
                v-model:loading="loading"
                v-model:finished="finished"
                v-model:list="list"
                @load="onLoad"
            >
                <van-cell
                    v-for="(item, index) in list"
                    :key="index"
                    :title="`逝者：${item.sd_ex1} &nbsp; 身份证：${cardHide(item.sd_ex4)}`"
                    :label="`承办人：${item.sd_ex8} &nbsp; 状态：${item.zt}`"
                    center
                    title-style="flex: 10 !important"
                    @click="routerPush1(item)"
                >
                    <template #value>
                        <van-button
                            v-if="item.zt == '审核拒绝'"
                            type="primary"
                            style="width: 5vw; height: 20vw"
                            @click.stop="routerPush2(item)"
                        >
                            重新提交
                        </van-button>
                    </template>
                </van-cell>
            </PullRefreshList>
        </div>
    </div>
</template>

<script lang="ts" setup>
    import { markRaw, reactive, ref, toRaw, onMounted, onBeforeMount } from 'vue';
    import type { Ref } from 'vue';
    import { useRouter, useRoute } from 'vue-router';
    import { showDialog, showConfirmDialog, showLoadingToast, showSuccessToast, closeToast } from 'vant';
    import PullRefreshList from '@/components/pullRefreshList/PullRefreshList.vue';
    import { getDeclarationListApi, cancelYuyueInfoApi } from '@/apis';
    import { phoneHide, cardHide } from '@/utils';

    const router = useRouter();
    const route = useRoute();

    import { useStore } from '@/store';
    const store = useStore();

    const list: Ref<Array<any>> = ref([]);
    const loading: Ref<boolean> = ref(false);
    const finished: Ref<boolean> = ref(false);
    const refreshing: Ref<boolean> = ref(true);
    const onLoad = async (callback) => {
        // if (refreshing.value) {
        // 	list.value = [];
        // 	refreshing.value = false;
        // }
        let val = await getDeclarationListApi({
            openid: store.openid,
        });
        list.value.push(...val[0].list);
        callback(true);
        // loading.value = false;
        // finished.value = true;
    };
    const routerPush1 = (val) => {
        // 后面看是跳转还是什么
        console.log(val);
        router.push(`/reportDetails?sd_id=${val.sd_id}`);
    };
    const routerPush2 = (val) => {
        console.log(val);
        router.push(`/Information?sd_id=${val.sd_id}`);
    };
    const cancel = (val) => {
        showConfirmDialog({
            title: '提示',
            message: '确定取消预约？',
        })
            .then(() => {
                if (val.sh_ex42 == 'Y') {
                    showDialog({
                        title: '提示',
                        message: '已通过审核，请联系管理员取消！',
                    });
                } else {
                    showLoadingToast({
                        message: '加载中...',
                        forbidClick: true,
                        duration: 0,
                    });
                    cancelYuyueInfoApi({
                        sh_id: val.sh_id,
                    })
                        .then(async (res) => {
                            closeToast();
                            showSuccessToast({
                                message: res[0].msg,
                            });
                            list.value = [];
                            loading.value = true;
                            finished.value = false;
                            let val = await getDeclarationListApi({
                                openid: store.openid,
                            });
                            list.value.push(...val[0].list);
                            loading.value = false;
                            finished.value = true;
                        })
                        .catch((err) => {
                            closeToast();
                        });
                }
            })
            .catch((err) => {
                // showConfirmDialog({
                // 	title: '提示',
                // 	message: '取消预约失败！'
                // })
            });

        console.log(val);
    };
</script>

<style lang="scss" scoped>
    .noticeList {
        width: 100%;
        height: 100vh;
        overflow: hidden;
        display: flex;
        flex-direction: column;
        background: url(@/assets/img/bg/bg11.png);
        background-size: 100% 100%;
    }
    // background: url(@/assets/policy/policybg-car.png) no-repeat;
    .my-header {
        display: flex;
        justify-content: center;
        // background: url(@/assets/policy/policybg.png) no-repeat;
        // background-size: 100% 90%;
        margin-bottom: 10px;
        border-radius: 10px;
    }

    .my-header::after {
        content: '';
        width: 100%;
        height: 185px;
        // margin-top: 20px;
        // background: url(@/assets/banner/gmjs_bg.png);
        background: url(@/assets/img/policy/policybg-car.png) no-repeat;
        background-size: 110% 110%;
        background-position: 30% 50%;
        border-radius: 5px;
    }
    // .my-header {
    // 	display: flex;
    // 	justify-content: center;
    // 	background: url(@/assets/policy/policybg.png) no-repeat;
    // 	background-size: 100% 90%;
    // 	margin-bottom: 10px;
    // 	border-radius: 10px;
    // }

    // .my-header::after {
    // 	content: '';
    // 	width: 95%;
    // 	height: 185px;
    // 	margin-top: 20px;
    // 	background: url(@/assets/banner/gmjs_bg.png);
    // 	background-size: 100% 100%;
    // 	border-radius: 5px;
    // }

    .my-main {
        display: flex;
        flex-direction: column;
        align-items: center;
        /* justify-content: center; */
    }

    .maindiv {
        width: 90%;
        /* border: 1px solid #2C3E50; */
        box-shadow: 0px 0px 5px 5px #e3eee9;
        border-radius: 10px;
        overflow: hidden;
        margin-bottom: 25px;
    }

    .maindivfont1 {
        color: #333333;
        font-size: 12pt;
        font-weight: bold;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
        margin-top: 10px;
        margin-bottom: 10px;
    }

    .maindivfont2 {
        color: #666666;
        font-size: 10pt;
        word-break: break-all;
        text-overflow: ellipsis;
        display: -webkit-box;
        -webkit-box-orient: vertical;
        -webkit-line-clamp: 2;
        overflow: hidden;
        margin-bottom: 30px;
    }

    .listmain {
        flex: 1;
        overflow: auto;
    }
</style>
